<template>
  <!-- 零部件历史工单 -->
  <view class="partHistory">
    <view class="header" :style="{top:stickyTop+'px'}">
      <view class="tabs">
        <view
          :class="['tabs-item', tabIdx == item.id ? 'act' : '']"
          v-for="(item, index) in typeList"
          :key="index"
          @click="handleClickTab(item.id)"
          >{{ item.text }}</view
        >
      </view>
      <!-- 历史工单提示 -->
      <view class="historyTips">
        <view class="left">{{ title }}</view>
      </view>
    </view>

    <view class="orderListMain">
      <view class="" v-if="list.length">
        <view class="all">
          <view class="year" v-for="(item, index) in list" :key="index">
            <view class="year_item">
              <view class="year_left">
                <view class="yearLabel">
                  {{ item.label }}
                </view>
              </view>

              <view class="year_right">
                <view class="list_item" v-for="(e, i) in item.value" :key="i">
                  <view class="left"
                    >{{ e.label.slice(5, 12).replaceAll("-", "/") }}
                    <view class="line"></view>
                  </view>
                  <view class="right">
                    <part-order-card
                      v-for="(v, j) in e.value"
                      :key="j"
                      :item="v"
                    ></part-order-card>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="more" @click="handleLoadMore">
          {{ stopQuery ? "- 已经到底了 -" : "点击加载更多" }}
        </view>
      </view>

      <view class="empty" v-else>
        <view class="img">
          <image src="@/static/images/default.png"></image>
        </view>
        <view class="text">- 暂无相关数据 -</view>
      </view>
    </view>
  </view>
</template>

<script>
import PartOrderCard from './components/partOrderCard.vue';
import {
	getAllPlanItem,
	getAllPlanBy,
	getAllPlanWx,
	getAllPlanPj,
} from '@/apis/elevator.js';
export default {
	components: {
		PartOrderCard,
	},
	props: {
		elevatorId: {
			type: String,
		},
		partsId:{
			type:[String,Number]
		},
		stickyTop:{
			type:Number
		}
    
	},
	data() {
		return {
			typeList: [
				{ text: '全部', id: 0 },
				{ text: '保养', id: 1 },
				{ text: '维修', id: 2 },
				{ text: '配件', id: 3 },
			],
			tabIdx: 0,
			list: [{ label: '2022', value: [{ label: '2022-12-14' }] }],
			curStarDate: new Date().getFullYear(),
			isLoadMore: false,
			stopQuery: false,
			title: '',
		};
	},
	created() {
		this.fetchOrderList();
	},

	methods: {
		// 点击加载更多
		handleLoadMore() {
			if (this.stopQuery) {
				return;
			}
			this.isLoadMore = true;
			this.stopQuery = false;
			this.curStarDate = this.curStarDate - 1;
			this.fetchOrderList();
		},
		// 首次加载如果为空指标继续加载
		continuereQuest() {
			if (this.curStarDate < 2023) {
				return;
			}
			this.curStarDate = this.curStarDate - 1;
			this.fetchOrderList();
		},
		handleClickTab(res) {
			this.tabIdx = res;
			this.isLoadMore = false;
			this.curStarDate = new Date().getFullYear();
			this.title = '';
			this.stopQuery = false;
			this.fetchOrderList();
		},
		fetchOrderList() {
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			if (!this.isLoadMore) {
				this.list = [];
				this.startDate = new Date().getFullYear();
			}
			const parsms = {
				elevatorId: this.elevatorId,
				startDate: this.curStarDate + '-01-01 00:00:00',
				endDate: this.curStarDate + '-12-31 23:59:59',
				partsId: this.partsId,
			};
			const historyFun = [
				getAllPlanItem,
				getAllPlanBy,
				getAllPlanWx,
				getAllPlanPj,
			];
			historyFun[this.tabIdx]({
				elevatorId: this.elevatorId,
				...parsms,
			}).then((res) => {
				// console.log(res, 999);
				if (res.data.value.length == 0) {
					// 如果是加载更多
					if (this.isLoadMore) {
						uni.hideLoading();
						this.title = res.data.label;
						this.stopQuery = true;
						return;
					} else {
						// 如果不是加载更多,首次加载再请求
						// console.log("不是加载更多")
						this.continuereQuest();
					}
				}
				this.title = res.data.label;
				this.list.push(...res.data.value);
				uni.hideLoading();
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.partHistory {
  .header {
    position: sticky;
    left: 0;
    z-index: 10;
  }
  .tabs {
    background-color: #ffffff;
    display: flex;
    // border-bottom: 2rpx #eee solid;
    height: 76rpx;
    padding: 0 22rpx;
    align-items: center;
    // justify-content: space-between;

    &-item {
      display: flex;
      width: 128rpx;
      height: 44rpx;
      background: #f3f6f8;
      border-radius: 22rpx;
      font-size: 26rpx;
      font-weight: 400;
      // border-bottom: 4rpx solid #fff;
      color: #666;
      transition: 0.4s all;
      justify-content: center;
      align-items: center;
      margin-right: 16rpx;
    }

    .act {
      color: #0091ff;
      background: #dcf0ff;
    }
  }
  .historyTips {
    background-color: #f3f6f8;
    color: #666;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    .right {
      width: 300rpx;
    }
  }
  .orderListMain {
    background: #f3f6f8;
    padding: 0 20rpx;
    .content_Tit {
      display: flex;
      justify-content: space-between;

      .date_count {
        font-size: 24rpx;
        color: #666666;
        margin-right: 20rpx;

        text {
          color: #0091ff;
        }
      }
    }

    .date {
      color: #333;
      font-size: 26rpx;
      font-weight: 600;
      padding-left: 40rpx;
      position: relative;
    }

    .line {
      width: 4rpx;
      height: 22rpx;
      background: #333333;
      position: absolute;
      left: 20rpx;
      top: 8rpx;
    }

    .more {
      width: 100%;
      padding: 30rpx 0;
      text-align: center;
      color: #999999;
      font-size: 24rpx;
    }
  }
  .empty {
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 64rpx;
      height: 64rpx;
    }

    height: 800rpx;
    flex-direction: column;
  }
  .year {
    width: 100%;
    .year_item {
      display: flex;
      position: relative;

      .year_left {
        position: absolute;
        left: 0rpx;
        font-size: 28rpx;
        top: 18rpx;
        display: flex;
        .title {
          color: #666;
          font-size: 26rpx;
          padding-left: 42rpx;
        }
      }
      .year_right {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 60rpx;
      }
    }
  }
  .list {
    width: 100%;
    position: relative;
  }
  .list_item {
    display: flex;
    width: 100%;
    position: relative;
    margin-bottom: 16rpx;

    .left {
      position: relative;
      left: 0rpx;
      width: 110rpx;
      top: 18rpx;
      font-size: 26rpx;
      font-weight: 500;
      .line {
        width: 2rpx;
        height: calc(100% - 78rpx);
        background: #d2dae0;
        position: absolute;
        left: 42rpx;
        margin: 20rpx 0;
        top: 32rpx;
      }
    }
    .right {
      width: 100%;
      margin-right: 20rpx;
    }
  }
}
</style>
